import React, { Component } from 'react';
import {
  Link,
} from 'react-router-dom';
import Loading from '../../components/Loading';
import './styles.less';
import { fetchGankList } from '../../services';
import Pagination from '../../components/Pagination';
import { GANK_TYPES } from '../../constant';

class GankArtcleList extends Component {
  state = {
    list: [],
    pageNumber: 1,
    pageSize: 10,
    total: 0,
    type: GANK_TYPES[0],
  };

  componentDidMount() {
    const pageNumber = this.props.match.params.pageNumber || 1;
    const pageSize = this.props.match.params.pageSize || 10;
    const type = this.props.match.params.type || 'all';

    this.fetchData({pageNumber, pageSize, type});
  }

  fetchData = (params) => {

    const {type, pageNumber, pageSize} = {...this.state, ...params}

    if (Loading.isLoading()) {
      return;
    }

    Loading.globalLoading();
    fetchGankList({
      type, 
      pageNumber, 
      pageSize
    })
      .then((res) => {
        const data = res.results;
        this.props.history.push(`/list/${type}/${pageNumber}/${pageSize}`); // 把数据存到 url 上面
        this.setState({
          list: data,
          type, 
          pageNumber, 
          pageSize,
        });
        console.log(res.results);
      })
      .then(() => {
        Loading.stopGlobalLoading();
      }, (err) => {
        console.error(err);
        Loading.stopGlobalLoading();
      });

  }

  /**
   * 当分类筛选去改变是触发
   */
  handleFilterChange = (value) => {
    console.log(value);
    // this.setState({
    //   type: value,
    // });
    this.fetchData({type: value});
  }

    /**
   * 当分类筛选去改变是触发
   */
  handlePageChange = ({pageNumber, pageSize}) => {
    // this.setState({
    //   pageNumber,
    //   pageSize, 
    // });
    this.fetchData({pageNumber, pageSize});
    
  }

  render() {
    return (
      <div className="list-wrap">
        <div className="filter">
          {
            GANK_TYPES.map(
              filterValue => (
                <div
                  className={"filter-item" + (this.state.type === filterValue ? ' active' : '') } 
                  key={filterValue}
                  onClick = {() => this.handleFilterChange(filterValue)}
                >
                  {filterValue}
                </div>
              )
            )
          }
        </div>
        <div className="list">
          {
            this.state.list.map(item => (
              <div key={item._id} className="list-item">
                <Link 
                  to={`/detail/${item._id}?url=${encodeURIComponent(item.url)}&pageNumber=${this.state.pageNumber}&desc=${encodeURIComponent(item.desc)}`}
                >
                  {item.desc}
                </Link>
              </div>
            ))
          }
        </div>
        <div className="pagination">
          <Pagination 
            pageNumber={+this.state.pageNumber}
            pageSize={+this.state.pageSize}
            onChange={this.handlePageChange}
          />
        </div>
        {/* <pre dangerouslySetInnerHTML={{ __html: JSON.stringify(this.state.data, null, 2) }} /> */}
      </div>
    );
  }
}

export default GankArtcleList;
